<template>
	<view class="pics">
		<scroll-view class="left" scroll-y>
			<block v-for="item in picsList" :key="item.id">
				<view :class="item.id === current ? 'active':'' " @click="currenClick(item.id)">{{item.title}}</view>
			</block>
		</scroll-view>
		<scroll-view scroll-y class="right">
			<block v-for="(item,index) in secondData" :key="index">
				<view class="item">
					<image lazy-load :src="item.img_url" @click="previewImg(item.img_url)"></image>
					<text>{{item.zhaiyao}}</text>
				</view>
			</block>
			<view class="title" v-if="secondData.length === 0">暂无数据</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				picsList: [],
				current: 14,
				secondData: []
			}
		},
		created() {
			this.getPicsList()
			this.getClickData(this.current)
		},
		methods: {
			// 获取分类数据
			async getPicsList() {
				const res = await this.$http({
					url: '/getimgcategory'
				})
				if(res.statusCode !== 200) return uni.showToast({
					title: '获取分类数据错误'
				})
				this.picsList = res.data.message
			},
			// 获取被点击的id
			currenClick(index) {
				this.current = index
				this.getClickData(index)
			},
			// 获取被点击的数据
			async getClickData(index) {
				const res = await this.$http({
					url: '/getimages/' + index
				})
				if(res.statusCode !== 200) return uni.showToast({
					title: '获取数据失败'
				})
				this.secondData = res.data.message
			},
			// 预览图片
			previewImg(current) {
				var urls = []
				this.secondData.map(item => {
					urls.push(item.img_url)
				})
				uni.previewImage({
					current,
					urls
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}
	.pics {
		height: 100%;
		display: flex;
	}
	.right {
		height: 100%;
		width: 530rpx;
		margin: 10rpx auto;
		image {
			width: 530rpx;
			height: 530rpx;
			border-radius: 10rpx;
		}
		text {
			font-size: 30rpx;
			line-height: 60rpx;
		}
		.title {
			text-align: center;
			padding: 10rpx;
		}
	}
	.left {
		height: 100%;
		width: 200rpx;
		border-right: 1px solid #eee;
		view {
			height: 150rpx;
			font-size: 38rpx;
			text-align: center;
			line-height: 150rpx;
			border-top: 1px solid #eee;
		}
		view:first-child {
			border-top: 0;
		}
		.active {
			background-color: $shop-color;
			color: white;
		}
	}
</style>
